<template>
	<view class="u-tooltip  u-tooltip__wrapper" :style="[$u.addStyle(customStyle)]">
		<!-- <u-overlay :show="showTooltip && tooltipTop !== -10000 && overlay"
			customStyle="backgroundColor: rgba(0, 0, 0, 0)" @click="overlayClickHandler"></u-overlay> -->
		<view class="u-tooltip__wrapper">
			<view @longpress.stop="longpressHandler" :id="textId" :ref="textId" @touchend="touchEnd"
				@touchmove="touchMove">
				<slot>
					<text class="u-tooltip__wrapper__text" :userSelect="false" :selectable="false" :style="{
							color: color,
							backgroundColor: bgColor && showTooltip && tooltipTop !== -10000 ? bgColor : 'transparent'
						}">{{ text }}</text>
				</slot>
			</view>
			<u-transition mode="fade" :show="showTooltip" duration="300" :customStyle="{
					position: 'absolute', 
					top: $u.addUnit(tooltipTop),
					zIndex: zIndex,
					...tooltipStyle
				}">
				<view class="u-tooltip__wrapper__popup" :id="tooltipId" :ref="tooltipId">
					<view class="u-tooltip__wrapper__popup__indicator"
						hover-class="u-tooltip__wrapper__popup__indicator--hover" v-if="buttons.length" :style="[indicatorStyle, {
							width: $u.addUnit(indicatorWidth),
							height: $u.addUnit(indicatorWidth),
						}]">
					</view>
					<view class="u-tooltip__wrapper__popup__list" :id="tooltipbottomId" :ref="tooltipbottomId">
						<block v-for="(item , index) in buttons" :key="index">
							<view class="u-tooltip__wrapper__popup__list__btn"
								hover-class="u-tooltip__wrapper__popup__list__btn--hover">
								<image :src="item.img" mode="" style="width: 30rpx;height: 30rpx;" v-if="item.img">
								</image>
								<text class="u-tooltip__wrapper__popup__list__btn__text"
									@tap="btnClickHandler(index)">{{ item.text }}</text>
							</view>
						</block>
					</view>
				</view>
			</u-transition>
		</view>
	</view>
</template>

<script>
	import props from './props.js';
	// #ifdef APP-NVUE 
	const dom = uni.requireNativePlugin('dom')
	// #endif
	// #ifdef H5
	import ClipboardJS from "./clipboard.min.js"
	// #endif
	/**
	 * Tooltip 
	 * @description 
	 * @tutorial https://www.uviewui.com/components/tooltip.html
	 * @property {String | Number}	text		需要显示的提示文字
	 * @property {String | Number}	copyText	点击复制按钮时，复制的文本，为空则使用text值
	 * @property {String | Number}	size		文本大小（默认 14 ）
	 * @property {String}			color		字体颜色（默认 '#606266' ）
	 * @property {String}			bgColor		弹出提示框时，文本的背景色（默认 'transparent' ）
	 * @property {String}			direction	弹出提示的方向，top-上方，bottom-下方（默认 'top' ）
	 * @property {String | Number}	zIndex		弹出提示的z-index，nvue无效（默认 10071 ）
	 * @property {Array}			buttons		扩展的按钮组
	 * @property {Boolean}			overlay		是否显示透明遮罩以防止触摸穿透（默认 true ）
	 * @property {Object}			customStyle	定义需要用到的外部样式
	 * 
	 * @event {Function} 
	 * @example 
	 */
	export default {
		name: 'u-tooltip',
		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
		data() {
			return {
				direction: "top",
				// 是否展示气泡
				showTooltip: false,
				// 生成唯一id，防止一个页面多个组件，造成干扰
				textId: uni.$u.guid(),
				tooltipId: uni.$u.guid(),
				tooltipbottomId: uni.$u.guid(),
				// 初始时甚至为很大的值，让其移到屏幕外面，为了计算元素的尺寸
				tooltipTop: -10000,
				// 气泡的位置信息
				tooltipInfo: {
					width: 0,
					left: 0
				},
				tooltipStyle: {},
				// 文本的位置信息
				textInfo: {
					width: 0,
					left: 0
				},
				// 三角形指示器的样式
				indicatorStyle: {},
				// 气泡在可能超出屏幕边沿范围时，重新定位后，距离屏幕边沿的距离
				screenGap: 12,
				// 三角形指示器的宽高，由于对元素进行了角度旋转，精确计算指示器位置时，需要用到其尺寸信息
				indicatorWidth: 14,
				ifLongtap: true
			}
		},
		mounted() {
			// this.init()
		},
		methods: {
			async init() {
				let size2 = await this.queryRect(this.tooltipbottomId)
				if (this.textInfo.top < size2.height + 44 + this.$u.sys().statusBarHeight) {
					this.direction = 'bottom'
				} else {
					this.direction = 'top'
				}
				const style = {
						transform: `translateY(${this.direction === 'top' ? '-100%' : '100%'})`,
					},
					sys = uni.$u.sys(),
					getPx = uni.$u.getPx,
					addUnit = uni.$u.addUnit

				if (this.tooltipInfo.width / 2 > this.textInfo.left + this.textInfo.width / 2 - this.screenGap) {
					this.indicatorStyle = {}
					style.left = `-${addUnit(this.textInfo.left - this.screenGap)}`
					this.indicatorStyle.left = addUnit(this.textInfo.width / 2 - getPx(style.left) - this
						.indicatorWidth /
						2)
				} else if (this.tooltipInfo.width / 2 > sys.windowWidth - this.textInfo.right + this.textInfo.width /
					2 -
					this.screenGap) {
					this.indicatorStyle = {}
					style.right = `-${addUnit(sys.windowWidth - this.textInfo.right - this.screenGap)}`
					this.indicatorStyle.right = addUnit(this.textInfo.width / 2 - getPx(style.right) - this
						.indicatorWidth / 2)
				} else {
					const left = Math.abs(this.textInfo.width / 2 - this.tooltipInfo.width / 2)
					style.left = this.textInfo.width > this.tooltipInfo.width ? addUnit(left) : -addUnit(left)
					this.indicatorStyle = {}
				}
				if (this.direction === 'top') {
					style.marginTop = '-10px'
					this.indicatorStyle.bottom = '-4px'
				} else {
					style.marginTop = this.textInfo.height - size2.height + 10 + 'px'
					this.indicatorStyle.top = '-4px'
				}

				this.tooltipStyle = style
			},
			touchEnd() {
				this.ifLongtap = true;
			},
			touchMove(e) {
				// 手指触摸后的移动事件
				this.ifLongtap = false;
			},
			// 长按触发事件
			async longpressHandler() {
				console.log(this.ifLongtap);
				if (this.ifLongtap) {
					await this.getElRect()
					this.tooltipTop = 0
					this.showTooltip = true
				}
			},
			// 点击透明遮罩
			overlayClickHandler() {
				this.showTooltip = false
				this.tooltipTop = -10000
			},
			// 点击弹出按钮
			btnClickHandler(index) {
				this.showTooltip = false
				this.tooltipTop = -10000
				// 如果需要展示复制按钮，此处index需要加1，因为复制按钮在第一个位置
				this.$emit('click', index)
			},
			// 查询内容高度
			queryRect(ref) {
				// #ifndef APP-NVUE
				return new Promise(resolve => {
					this.$nextTick(() => {
						this.$uGetRect(`#${ref}`).then(size => {
							resolve(size)
						})
					})
				})
				// #endif

				// #ifdef APP-NVUE
				// nvue下，使用dom模块查询元素高度
				// 返回一个promise，让调用此方法的主体能使用then回调
				return new Promise(resolve => {
					dom.getComponentRect(this.$refs[ref], res => {
						resolve(res.size)
					})
				})
				// #endif
			},
			// 元素尺寸
			async getElRect() {
				// 调用之前，先将指示器调整到屏幕外，方便获取尺寸
				this.showTooltip = true
				this.tooltipTop = -10000
				try {
					let size = await this.queryRect(this.tooltipId)
					this.tooltipInfo = size
					this.showTooltip = false
					let size2 = await this.queryRect(this.textId)
					this.textInfo = size2
					await this.init()
				} catch (e) {
					console.log(e);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/components.scss";

	.u-tooltip {
		position: relative;
		@include flex;

		&__wrapper {
			@include flex;
			justify-content: center;
			/* #ifndef APP-NVUE */
			// white-space: nowrap;
			/* #endif */

			&__text {
				font-size: 14px;
			}

			&__popup {
				@include flex;
				justify-content: center;


				&__list {
					background-color: #060607;
					position: relative;
					flex: 1;
					border-radius: 5px;
					padding: 0px 0;
					overflow: hidden;
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(110rpx, 1fr));
					/* 使用auto-fill和minmax来实现动态换行 */
					grid-auto-rows: auto;
					max-width: 550rpx;

					&__btn {
						padding: 11px 0;
						display: flex;
						flex-direction: column;
						align-items: center;
						gap: 10rpx;


						&--hover {
							background-color: #272727;
						}

						&__text {
							font-size: 20rpx;
							background-image: linear-gradient(180deg,
									rgba(255, 255, 255, 1) 0,
									rgba(229, 189, 132, 1) 100%);
							color: rgba(255, 255, 255, 1);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}

				&__indicator {
					position: absolute;
					background-color: #060607;
					width: 14px;
					height: 14px;
					bottom: -4px;
					transform: rotate(45deg);
					border-radius: 2px;
					z-index: -1;

					&--hover {
						background-color: #272727;
					}
				}
			}
		}
	}
</style>